<template>
  <el-timeline>

    <div class="d2">
      <el-button
        class="btn1"
        type="primary" size="small"
        @click="dialog = true;showBtn=false" v-if="showBtn">添加备注</el-button>
    </div>
    <el-timeline>
     <el-timeline-item
      :timestamp="vv.role + '-' +vv.username"
      placement="top"
      v-for="(vv,i) in history"
      :key="i"
      size="large"
      :color="vv.color"
    >
      <el-card>
        <p v-for="(note,n) in vv.note_list" :key="n" v-html="note">
        </p>
        <fileList
        :file_list="vv.file_list"
        v-if="vv.file_list.length > 0"
        ></fileList>

      </el-card>
    </el-timeline-item>
    </el-timeline>
    <previewPicture ref="dialogs"></previewPicture>

<!--    备注-->
    <el-drawer
      title="新增备注"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.note"></el-input>
          </el-form-item>
          <el-form-item label="附件" :label-width="formLabelWidth">
            <el-row>
              <el-col :span="20">
                <uploadFile :params="param" @test="changeFileList"></uploadFile>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label-width="85px">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>



  </el-timeline>
</template>
<script>
  import previewPicture from "./previewPicture";
  import uploadFile from "./uploadFile.vue";
  import {addNote} from "../../apilist/Note";
  import fileList from "./fileList.vue";

  export default {
        name: "history",
        props:["history","pid","type"],
        components: {previewPicture,uploadFile,fileList},
        data(){
          return {
            showBtn: true,
            dialog: false,
            loading: false,
            form: {
              title: '',
              note: '',
            },
            formLabelWidth: '80px',
            timer: null,
            fileList: [],
            param: {
              dir: 'note',
              file_list: [],
            }
          };
          },
        methods: {
            changeImgUrl(img){
                this.$refs.dialogs.visable=true
                this.$refs.dialogs.img_path = img.link
            },
          handleClose(done) {
            if (this.loading) {
              return;
            }
            this.$confirm('确定要提交表单吗？')
              .then(_ => {
                  this.loading = true;
                  let params = {...this.form};
                  params['pid'] = this.pid;
                  params['type'] = this.type;
                  params['fileList'] = this.fileList;
                  addNote(params).then(res => {
                    this.$message({
                      type: 'success',
                      message: "添加成功",
                      onClose:()=>{
                        this.loading = false;
                        this.dialog = false;
                        this.showBtn = true;
                      }
                    });
                  })
              })
              .catch(_ => {});
          },
          cancelForm() {
            this.loading = false;
            this.dialog = false;
            this.showBtn = true;
            clearTimeout(this.timer);
          },

          changeFileList(list){
            //console.log('父组件: '+ list)
            this.fileList = list
          },
        },

    }
</script>

<style>
  .el-timeline-item__timestamp{
    font-size: 23px !important;
    font-weight: bold !important;
    color:#409EFF !important;
  }

  .d2 {
    min-width: 100%;
    height: 40px;
    position: fixed;
    top:80%;
    right:5%;
   transform: translate(95%,-50%);
    z-index: 999999;
  }
  .btn1 {
    position: relative;
    right: 10px;
    top: 10px;
  }

</style>
